<!doctype HTML>
<style>targetImage::first-line { color: yellow; }</style>
<div style="height: 2000px; width: 2000px;">
    <div id="targetImage" style="width: 50px; height: 50px">text text</div>
    <img id="testTarget" style="visibility: hidden">
</div>

<script src="../resources/text-based-repaint.js"></script>
<script>
window.testIsAsync = true;

// Disable under-invalidation checking because the "under-invalidation" of
// offscreen gif animation is intentional.
if (window.internals)
   internals.runtimeFlags.paintUnderInvalidationCheckingEnabled = false;

function repaintTest() {
    if (window.internals)
        internals.advanceImageAnimation(testTarget);
    requestAnimationFrame(function() {
        finishRepaintTest();
    });
}

function targetImageOnload() {
    // Scroll targetImage offscreen.
    window.scrollTo(0, 1000);
    runRepaintTest();
}

onload = function() {
    targetImage.style.background = "url(../../../svg/as-image/resources/animated-rect-fixed-size-2.svg)";

    // Use a parallel image element as a hack to detect whether the image has loaded, and therefore
    // we'll get a frame.
    testTarget.onload = targetImageOnload;
    testTarget.src = "../../../svg/as-image/resources/animated-rect-fixed-size-2.svg";
}
</script>
